<template>
	<view class="uni-tabbar">
		<view class="uni-tabbar__item" v-for="(item,index) in tabbar" :key="index" @tap="changeTab(item)">
			<view class="uni-tabbar__bd">
				<view v-if="item.text == '' " class="uni-tabbar__icon1">
					<image v-if="item.pagePath == pagePath" class="icon-img1" mode="aspectFit"
						:src="item.selectedIconPath"></image>
				</view>
				<view v-else-if="item.position == 'center'" class="uni-tabbar__icon big-icon">
					<image v-if="item.pagePath == pagePath" mode="aspectFit"
						:src="item.selectedIconPath"></image>
					<image v-else  mode="aspectFit" :src="item.iconPath"></image>
					<view class="uni-tabbar__label" style="font-size:22upx" :class="{'active': item.pagePath == pagePath}">
						{{item.text}}
					</view>
				</view>
				<view v-else class="uni-tabbar__icon">
					<image v-if="item.pagePath == pagePath" class="icon-img" mode="aspectFit"
						:src="item.selectedIconPath"></image>
					<image v-else class="icon-img" mode="aspectFit" :src="item.iconPath"></image>
					<view class="uni-tabbar__label" :class="{'active': item.pagePath == pagePath}">
						{{item.text}}
					</view>
				</view>
			</view>
			<view class="uni-center-box" v-if="item.position == 'center'"></view>
		</view>
	</view>

</template>

<script>
	export default {
		props: {
			pagePath: String,
			tabbar: Array
		},
		data() {
			return {
				page: '',
				showPage: false,
				containerHeight: 400,
			};
		},
		watch: {
			pagePath: {
				handler(val) {
					this.page = val
				},
				immediate: true
			}
		},
		methods: {
			changeTab(item) {
				if (this.page != item.pagePath) {
					this.page = item.pagePath;
					// 使用reLaunch关闭所有的页面，打开新的栏目页面
					uni.reLaunch({
						url: this.page
					});
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	
	.uni-tabbar {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9999;
		width: 100%;
		display: flex;
		justify-content: space-around;
		// height: 100upx;
		height: 120rpx;
		padding-bottom: 20upx;
		box-sizing: border-box;
		background-color: #fff;
		box-shadow: 0px 0px 20upx rgba(0, 0, 0, 0.32);

		.uni-tabbar__item {
			display: block;
			line-height: 24upx;
			font-size: 20upx;
			text-align: center;
			width: 25%;
			
			.uni-tabbar__bd{
				width: 100%;
				height: 100%;
				background-color: white;
				position: relative;
				z-index:99;
				padding: 16upx 0;
			}
		}

		.uni-tabbar__icon {	
			height: 40rpx;
			text-align: center;
		}
		
		.big-icon{
			position: relative;
			bottom: 50upx;
			z-index:101;
			image{
				width: 90upx;
				height: 90upx;
			}
		}
		
		.uni-center-box {
			width: 120rpx;
			height: 120rpx;
			background: #FFFFFF;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			top: -40rpx;
			border-radius: 60rpx;
			box-shadow: 0px 0px 20upx rgba(0, 0, 0, 0.32);
			z-index: 10;
		}

		.uni-tabbar__icon1 {
			height: 75rpx;
			text-align: center;
		}

		.icon {
			display: inline-block;
		}

		.uni-tabbar__label {
			height: 24upx;
			line-height: 24upx;
			font-size: 22upx;
			color: #999;

			&.active {
				color: #FA436A;
			}
		}

		.icon-img {
			height: 45upx;
			width: 45upx;
		}

		.icon-img1 {
			height: 75upx;
			width: 75upx;
		}
	}
</style>
